<!DOCTYPE html>
<html lang="en">
<head><title>关于我的简单介绍</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta -equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Yafine/cdn@1.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Yafine/cdn@1.7/css/font-awesome.min.css">
    <link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/1471748102/cdn@1.7.6/favicon.png" type="image/x-icon">
</head>
<style>body

a {
    color: #080808
}


@media (min-width: 768px) {
    .introducation {
        width: 80%;
        position: absolute;
        top: 53%;
        left: 50%;
        transform: translate(-50%, -50%)
    }
}</style>
<body>
<div class="container container-fluid banner-info">
    <div class="introducation">
        <div class="row introdu">
            <div class="col-md-4"><img class="rotation img"
                                       src="https://cdn.jsdelivr.net/gh/1471748102/cdn@1.7.6/20200103193013.jpg"
                                       alt="author.jpg" width="200px" height="200px"
                                       style="opacity:.6;border:1px solid #080808;border-radius:50%"></div>
            <div class="col-md-8" style="padding:10px">
                <table class="table">
                    <thead>
                    <tr>
                        <th colspan="3"><h4><i class="fa fa-address-card" aria-hidden="true"></i> 个人简介</h4></th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td scope="row"><i class="fa fa-user" aria-hidden="true"></i> 姓名：Hzw</td>
                        <td><i class="fa fa-graduation-cap" aria-hidden="true"></i> 毕业院校：河南工业大学</td>
                    </tr>
                    <tr>
                        <td scope="row"><i class="fa fa-birthday-cake" aria-hidden="true"></i> 生日：1998.12.31</td>
                        <td><i class="fa fa-map-marker" aria-hidden="true"></i> 地址：中国 | 山东 | 菏泽</td>
                    </tr>

                    </tbody>
                </table>
            </div>
        </div>
        <div class="row about-me">
            <div class="col-md-6" style="padding:5px 0">
                <center><h5>关于我 | About Me</h5></center>
                <ul class="list-group list">
                    <li class="list-group-item"><i class="fa fa-pencil-square" aria-hidden="true"></i> 学历： 本科软件工程专业.</li>
                    <li class="list-group-item"><i class="fa fa-clock-o" aria-hidden="true"></i> 现况： 在学习Java框架相关的技术知识,还需要继续努力.</li>
                    <li class="list-group-item"><i class="fa fa-superpowers" aria-hidden="true"></i> 性格： 有责任心，良好的沟通能力和团队合作精神.</li>
                    <li class="list-group-item"><i class="fa fa-bullseye" aria-hidden="true"></i> 目标： 全栈技术大佬.</li>
                    <li class="list-group-item"><i class="fa fa-th-large" aria-hidden="true"></i> Blog： 记录学习过程的点滴.</li>
                    <li class="list-group-item"><i class="fa fa-file-word-o" aria-hidden="true"></i>
                        一言API：
                        <center>
                        
                            <script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>
                            <div id="poem_sentence"></div>
                            <div id="poem_info"></div>
                            <script type="text/javascript">
                          jinrishici.load(function(result) {
                            var sentence = document.querySelector("#poem_sentence")
                            var info = document.querySelector("#poem_info")
                            sentence.innerHTML = result.data.content
                            info.innerHTML = '【' + result.data.origin.dynasty + '】' + result.data.origin.author + '《' + result.data.origin.title + '》'
                        });
</script>
             </center>           
                    </li>
                </ul>
            </div>
            <div class="col-md-6 skills" style="padding:5px 20px">
                <center><h5>我的技能 | My Skills</h5></center>
                <div class="progress">
                    <div class="progress-bar bg-success" role="progressbar" style="width:65%" aria-valuenow="65"
                         aria-valuemin="0" aria-valuemax="100">HTML/JSP &emsp; 65%
                    </div>
                </div>
                <div class="progress">
                    <div class="progress-bar bg-dark" role="progressbar" style="width:40%" aria-valuenow="40"
                         aria-valuemin="0" aria-valuemax="100">ElementUI &emsp; 40%
                    </div>
                </div>
                <div class="progress">
                    <div class="progress-bar bg-info" role="progressbar" style="width:55%" aria-valuenow="60"
                         aria-valuemin="0" aria-valuemax="100">Linux &emsp; 55%
                    </div>
                </div>
                <div class="progress">
                    <div class="progress-bar bg-danger" role="progressbar" style="width:75%" aria-valuenow="75"
                         aria-valuemin="0" aria-valuemax="100">C/Java &emsp; 75%
                    </div>
                </div>
                
                <div class="progress">
                    <div class="progress-bar bg-primary" role="progressbar" style="width:65%" aria-valuenow="65"
                         aria-valuemin="0" aria-valuemax="100">SSM/Spring Boot &emsp; 65%
                    </div>
                </div>
                <div class="progress">
                    <div class="progress-bar bg-secondary" role="progressbar" style="width:75%" aria-valuenow="75"
                         aria-valuemin="0" aria-valuemax="100">Git &nbsp;75%
                    </div>
                </div>
                <div class="progress">
                    <div class="progress-bar bg-dark" role="progressbar" style="width:50%" aria-valuenow="50"
                         aria-valuemin="0" aria-valuemax="100">Maven/Gradle &nbsp;50%
                    </div>
                </div>
                <div class="progress">
                    <div class="progress-bar bg-warning" role="progressbar" style="width:60%" aria-valuenow="60"
                         aria-valuemin="0" aria-valuemax="100">SQL &emsp; 60%
                    </div>
                </div>
                
            </div>
        </div>


    </div>
</div>
</body>
</html>
